<template>
	<scroll-view scroll-y="true" class="scroll-container">
		<!-- 1. 泉州风光（轮播图） -->
		<view class="module-box">
			<view class="module-title">泉州风光</view>
			<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" class="banner-swiper">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.url" mode="aspectFill" class="banner-img" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 2. 泉州介绍（富文本） -->
		<view class="module-box">
			<view class="module-title">泉州介绍</view>
			<view class="rich-text" v-html="cityIntro"></view>
		</view>

		<!-- 3. 探索进度 -->
		<view class="module-box">
			<view class="module-title">探索进度</view>
			<view class="progress-now">当前进度{{ progressPercent }}%</view>
			<progress :percent="60" show-info stroke-width="6" class="progress-bar" />
		</view>

		<!-- 4. 选择城市 -->
		<view class="module-box">
			<view class="module-title">选择城市</view>
			<picker mode="region" :value="region" class="picker">
				<view class="picker-text">{{ region[0] }} - {{ region[1] }} - {{ region[2] }}</view>
			</picker>
		</view>
		<!-- 5. 泉州宣传（视频） -->
		<view class="module-box">
			<view class="module-title">泉州宣传</view>
			<view class="media-item">
				<video src="/static/city-video.mp4" controls poster="/static/video-poster.jpg"
					class="video-player"></video>
			</view>

			<!-- <view class="module-box">
				<view class="module-title">泉州背景音乐</view>
				<button class="audio-btn" :class="{ 'playing': isPlaying }" @click="togglePlay">
					{{ isPlaying ? '暂停' : '播放' }}
				</button>
				
				<view class="audio-desc">泉州南音 - 泉州传统乐团</view>
				<slider class="audio-slider" :value="audioCurrent" :max="audioDuration" @change="changeAudioProgress" />
			</view> -->
		</view>
		<!-- 6. 偏好设置 -->
		<view class="module-box">
			<view class="module-title">偏好设置</view>
			<!-- 出行方式 -->
			<view class="preference-item">
				<span>出行方式：</span>
				<radio-group @change="handleTravelModeChange" class="radio-group">
					<label class="radio-label">
						<radio value="bus" :checked="travelMode === 'bus'" />公交
					</label>
					<label class="radio-label">
						<radio value="drive" :checked="travelMode === 'drive'" />自驾
					</label>
					<label class="radio-label">
						<radio value="walk" :checked="travelMode === 'walk'" />步行
					</label>
				</radio-group>
			</view>
			<!-- 显示推荐景点 -->
			<view class="preference-item">
				<span>显示推荐景点：</span>
				<switch :checked="showRecommend" @change="handleShowRecommendChange" />
			</view>
			<!-- 探索半径 -->
			<view class="preference-item">
				<span>探索半径：{{ radius }}km</span>
				<slider :value="radius" :min="1" :max="20" @change="handleRadiusChange" class="slider" />
			</view>
		</view>


	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [{
						url: '/static/city1.png'
					},
					{
						url: '/static/city2.jpg'
					},
					{
						url: '/static/city3.jpg'
					}

				],

				// 城市介绍富文本
				cityIntro: `
        <h4>海上丝绸之路起点 - 泉州</h4>
        <p><strong>历史文化</strong>：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p><strong>著名景点：</strong>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p><strong>特色文化：</strong>拥有<span style="color: #007AFF;">南音</span>、<span style="color: #007AFF;">木偶戏</span>和<span style="color: #007AFF;">闽南建筑</span>等丰富的非物质文化遗产。</p>
      `,
				progressPercent: 60,

				region: ["福建省", "泉州市", "丰泽区"],
				// 出行方式
				travelMode: "bus",
				// 显示推荐景点
				showRecommend: true,
				// 探索半径
				radius: 5,
				// 音频
				audio: null,
				isPlaying: false,
				audioCurrent: 0,
				audioDuration: 100
			};
		},
		// onReady() {
		// 	// 创建音频实例
		// 	this.audio = uni.createInnerAudioContext();
		// 	this.audio.src = "/static/city-music.mp3";
		// 	// 监听音频进度变化
		// 	this.audio.onTimeUpdate(() => {
		// 		this.audioCurrent = this.audio.currentTime;
		// 		this.audioDuration = this.audio.duration;
		// 	});
		// 	// 监听音频结束
		// 	this.audio.onEnded(() => {
		// 		this.isPlaying = false;
		// 		this.audioCurrent = 0;
		// 	});
		// },
		methods: {

			// 出行方式变更
			handleTravelModeChange(e) {
				this.travelMode = e.detail.value;
			},
			// 显示推荐景点开关变更
			handleShowRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			// 探索半径变更
			handleRadiusChange(e) {
				this.radius = e.detail.value;
			},
			// // 切换音频播放/暂停
			// togglePlay() {
			// 	if (this.isPlaying) {
			// 		this.audio.pause();
			// 	} else {
			// 		this.audio.play();
			// 	}
			// 	this.isPlaying = !this.isPlaying;
			// },
			// // 变更音频进度
			// changeAudioProgress(e) {
			// 	this.audio.seek(e.detail.value);
			// },

		},
	};
</script>

<style scoped>
	/* 滚动容器 */
	.scroll-container {
		height: 100vh;
		width: 100%;
		background-color: #f5f5f5;
		padding: 15rpx;
		box-sizing: border-box;
	}

	/* 模块通用样式（独立框） */
	.module-box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 25rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 模块标题 */
	.module-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #eee;
	}

	/* 轮播图 */
	.banner-swiper {
		width: 100%;
		height: 400rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	/* 富文本 */
	.rich-text {
		line-height: 1.8;
		color: #666;
		font-size: 28rpx;
	}

	.rich-text h4 {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 15rpx;
	}

	.rich-text strong {
		color: #333;
	}

	/* 进度条 */
	.progress-bar {
		width: 100%;
		margin-top: 10rpx;
	}

	.progress-now {
		font-size: 20rpx;
	}

	/* 城市选择器 */
	.picker {
		width: 100%;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 偏好设置 */
	.preference-item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		font-size: 28rpx;
	}

	.preference-item:last-child {
		margin-bottom: 0;
	}

	.preference-item span {
		width: 200rpx;
		color: #666;
	}

	.radio-group {
		display: flex;
		gap: 30rpx;
	}

	.radio-label {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.slider {
		flex: 1;
		margin-left: 20rpx;
	}

	/* 宣传媒体（视频） */
	.media-item {
		margin-bottom: 25rpx;
	}

	.video-player {
		width: 100%;
		height: 400rpx;
		border-radius: 8rpx;
	}

	/* 音频*/
	.audio-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.audio-btn {
		width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #2c69ff;
		color: #fff;
		border-radius: 8rpx;
		margin-bottom: 15rpx;
	}

	.audio-btn.playing {
		background-color: #ff6b6b;
	}

	.audio-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 15rpx;
		text-align: center;
	}

	.audio-slider {
		width: 100%;
	}
</style>